@import '../../../assets/styles/variables.scss';

.layout-header{
    position: $fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 40px;
    background-color: $dark-bg;
    color: $dark-color;
    box-shadow: $shadow-down;
    z-index: $zindex-affix;
    clear: both;
    .logo{
        display: inline-block;
        vertical-align: top;
        font-size: 26px;
        color: $body-background;
        .logo-main-titile {
            font-size: 24px;
            height: 40px;
            line-height: 40px;
            font-weight: bold;

        }
        .logo-sub-title {
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            .logo-sub-title-main {
                font-weight: bold;
            }
        }
    }
    .menu{
        display: inline-block;
        vertical-align: top;
        margin-left: 60px;
        .menu-item{
            position: $relative;
            float: left;
            padding: 0 20px;
            font-size: $font-size-base;
            text-align: center;
            text-indent: 0;
            border-right: none;
            cursor: pointer;
            &:hover, &.selected{
                color: $body-background ;
                background: $dark-bg-dark
            }
            .menu-item-beat {
                position: $absolute;
                top: 0;
                right: 0;
            }
        }
    }
    .user{
        float: right;
        height: 40px;
        cursor: pointer;
        position: $relative;
        span {
            display: inline-block;
            line-height: 40px;
            font-size: $font-size-base;
            padding: 0 16px 0 10px;
        }
        .user-icon {
            padding-right: 10px;
        }
        .user-menu {
            background: $menu-dark-active-bg;
            width: 130px;
            border: none;
            position: $absolute;
            top: 68px;
            left: 50%;
            margin-left: -65px;
            border-radius: $border-radius-small;
            .user-menu-arrow {
                width: 0;
                height: 0;
                border: 8px solid $body-background;
                border-color: transparent transparent $menu-dark-active-bg transparent;
                border-top: 0;
                list-style: none;
                position: $absolute;
                top: -8px;
                left: 50%;
                margin-left: -4px;
            }
            .user-menu-item {
                list-style: none;
                padding-left: 20px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                &:hover {
                    color: $body-background;
                    background: $dark-bg-dark;
                    border-top: none;
                    border-radius: $border-radius-small;
                }
                .user-menu-item-icon {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
        &:hover, &.selected {
            background: $menu-dark-active-bg;
        }
        .user-image{
            border-radius: 50%;
            width: 40px;
            height: auto;
        }
    }
}